﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Shared/_FrontEnd_Home_Layout.Master" AutoEventWireup="true" CodeBehind="Home.aspx.cs" Inherits="ProjectClass.View.FrontEnd.Home" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <title>Trang chủ</title>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="slidebar" runat="server">
    <!--  ==========  -->
    <!--  = Slider Revolution =  -->
    <!--  ==========  -->
    <div class="fullwidthbanner-container">
        <div class="fullwidthbanner">
            <ul>
                <li data-transition="premium-random" data-slotamount="3">
                    <img src="/Content/images/dummy/slides/1/slide.jpg" alt="slider img" width="1400" height="377" />

                    <!-- baloons -->
                    <div class="caption lft ltt"
                        data-x="570"
                        data-y="50"
                        data-speed="4000"
                        data-start="1000"
                        data-easing="easeOutElastic">
                        <img src="/Content/images/dummy/slides/1/baloon1.png" alt="baloon" width="135" height="186" />
                    </div>

                    <div class="caption lft ltt"
                        data-x="770"
                        data-y="60"
                        data-speed="4000"
                        data-start="1200"
                        data-easing="easeOutElastic">
                        <img src="/Content/images/dummy/slides/1/baloon3.png" alt="baloon" width="40" height="55" />
                    </div>

                    <div class="caption lft ltt"
                        data-x="870"
                        data-y="80"
                        data-speed="4000"
                        data-start="1500"
                        data-easing="easeOutElastic">
                        <img src="/Content/images/dummy/slides/1/baloon2.png" alt="baloon" width="60" height="83" />
                    </div>

                    <!-- texts -->
                    <div class="caption lfl big_theme"
                        data-x="120"
                        data-y="120"
                        data-speed="1000"
                        data-start="500"
                        data-easing="easeInOutBack">
                        With Webmarket, the Sky Is the Limit
                    </div>

                    <div class="caption lfl small_theme"
                        data-x="120"
                        data-y="190"
                        data-speed="1000"
                        data-start="700"
                        data-easing="easeInOutBack">
                        Take a tour on Webmarket HTML Template
                    </div>

                    <a href="features.html" class="caption lfl btn btn-primary btn_theme"
                        data-x="120"
                        data-y="260"
                        data-speed="1000"
                        data-start="900"
                        data-easing="easeInOutBack">ALL THEME FEATURES
                    </a>
                </li>
                <!-- /slide -->

                <li data-transition="premium-random" data-slotamount="3">
                    <img src="/Content/images/dummy/slides/2/slide.jpg" alt="slider img" width="1400" height="377" />

                    <!-- woman -->
                    <div class="caption lfb ltb"
                        data-x="800"
                        data-y="50"
                        data-speed="1000"
                        data-start="1000"
                        data-easing="easeInOutCubic">
                        <img src="/Content/images/dummy/slides/2/woman.png" alt="woman" width="361" height="374" />
                    </div>

                    <!-- plane -->
                    <div class="caption lfl str"
                        data-x="400"
                        data-y="20"
                        data-speed="10000"
                        data-start="1000"
                        data-easing="linear">
                        <img src="/Content/images/dummy/slides/2/plane.png" alt="aircraft" width="117" height="28" />
                    </div>

                    <!-- texts -->
                    <div class="caption lfl big_theme"
                        data-x="120"
                        data-y="120"
                        data-speed="1000"
                        data-start="500"
                        data-easing="easeInOutBack">
                        Slider Revolution
                    </div>

                    <div class="caption lfl small_theme"
                        data-x="120"
                        data-y="190"
                        data-speed="1000"
                        data-start="700"
                        data-easing="easeInOutBack">
                        This premium slider comes with the theme, as a bonus, for FREE!
                    </div>

                    <a href="features.html" class="caption lfl btn btn-primary btn_theme"
                        data-x="120"
                        data-y="260"
                        data-speed="1000"
                        data-start="900"
                        data-easing="easeInOutBack">AND MANY MORE ...
                    </a>
                </li>
                <!-- /slide -->

                <li data-transition="premium-random" data-slotamount="3">
                    <img src="/Content/images/dummy/slides/3/slide.jpg" alt="slider img" width="1400" height="377" />

                    <!-- phone -->
                    <div class="caption sfr fadeout"
                        data-x="950"
                        data-y="77"
                        data-speed="1000"
                        data-start="2500"
                        data-easing="easeInOutCubic">
                        <img src="/Content/images/dummy/slides/3/phone.png" alt="phone in a hand" width="495" height="377" />
                    </div>

                    <!-- texts -->
                    <div class="caption lfl big_theme"
                        data-x="120"
                        data-y="120"
                        data-speed="1000"
                        data-start="500"
                        data-easing="easeInOutBack">
                        We Are Mobile Ready
                    </div>

                    <div class="caption lfl small_theme"
                        data-x="120"
                        data-y="190"
                        data-speed="1000"
                        data-start="700"
                        data-easing="easeInOutBack">
                        Try to resize the browser window. The Webmarket will look awesome no matter the device screen resolution!
                    </div>

                    <a href="icons.html" class="caption lfl btn btn-primary btn_theme"
                        data-x="120"
                        data-y="260"
                        data-speed="1000"
                        data-start="900"
                        data-easing="easeInOutBack">And also all the icons are retina-ready...
                    </a>
                </li>
                <!-- /slide -->

                <li data-transition="premium-random" data-slotamount="3">
                    <img src="/Content/images/dummy/slides/4/slide.jpg" alt="slider img" width="1400" height="377" />

                    <!-- faces -->
                    <div class="caption lft ltt"
                        data-x="-150"
                        data-y="0"
                        data-speed="300"
                        data-start="2000"
                        data-easing="easeInOutCubic">
                        <img src="/Content/images/dummy/slides/4/person1.png" alt="satisfied customer" width="108" height="204" />
                    </div>
                    <div class="caption lft ltt"
                        data-x="0"
                        data-y="0"
                        data-speed="300"
                        data-start="2200"
                        data-easing="easeInOutCubic">
                        <img src="/Content/images/dummy/slides/4/person2.png" alt="satisfied customer" width="108" height="321" />
                    </div>
                    <div class="caption lft ltt"
                        data-x="500"
                        data-y="0"
                        data-speed="300"
                        data-start="2400"
                        data-easing="easeInOutCubic">
                        <img src="/Content/images/dummy/slides/4/person3.png" alt="satisfied customer" width="108" height="139" />
                    </div>
                    <div class="caption lft ltt"
                        data-x="720"
                        data-y="0"
                        data-speed="300"
                        data-start="2600"
                        data-easing="easeInOutCubic">
                        <img src="/Content/images/dummy/slides/4/person4.png" alt="satisfied customer" width="108" height="191" />
                    </div>
                    <div class="caption lft ltt"
                        data-x="940"
                        data-y="0"
                        data-speed="300"
                        data-start="2800"
                        data-easing="easeInOutCubic">
                        <img src="/Content/images/dummy/slides/4/person5.png" alt="satisfied customer" width="108" height="139" />
                    </div>
                    <div class="caption lft ltt"
                        data-x="1200"
                        data-y="0"
                        data-speed="300"
                        data-start="3000"
                        data-easing="easeInOutCubic">
                        <img src="/Content/images/dummy/slides/4/person6.png" alt="satisfied customer" width="108" height="179" />
                    </div>
                    <div class="caption lft ltt"
                        data-x="1350"
                        data-y="0"
                        data-speed="300"
                        data-start="3200"
                        data-easing="easeInOutCubic">
                        <img src="/Content/images/dummy/slides/4/person7.png" alt="satisfied customer" width="108" height="133" />
                    </div>

                    <!-- texts -->
                    <div class="caption lfl big_theme"
                        data-x="120"
                        data-y="140"
                        data-speed="1000"
                        data-start="500"
                        data-easing="easeInOutBack">
                        Over 1000 Satisfied Customers
                    </div>

                    <div class="caption lfl small_theme"
                        data-x="120"
                        data-y="210"
                        data-speed="1000"
                        data-start="700"
                        data-easing="easeInOutBack">
                        Take a look at our profile page on the <a href="http://themeforest.net/user/ProteusThemes" target="_blank">ThemeForest</a>! 
                    </div>

                    <a href="http://proteusthemes.ticksy.com/" class="caption lfl btn btn-primary btn_theme"
                        data-x="120"
                        data-y="280"
                        data-speed="1000"
                        data-start="900"
                        data-easing="easeInOutBack">We provide support on Ticksy
                    </a>
                </li>
                <!-- /slide -->
            </ul>
            <div class="tp-bannertimer"></div>
        </div>
        <!--  ==========  -->
        <!--  = Nav Arrows =  -->
        <!--  ==========  -->
        <div id="sliderRevLeft"><i class="icon-chevron-left"></i></div>
        <div id="sliderRevRight"><i class="icon-chevron-right"></i></div>
    </div>
    <!-- /slider revolution -->

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <!--  ==========  -->
    <!--  = New Products =  -->
    <!--  ==========  -->
    <div class="boxed-area blocks-spacer">
        <div class="container">

            <!--  ==========  -->
            <!--  = Title =  -->
            <!--  ==========  -->
            <div class="row">
                <div class="span12">
                    <div class="main-titles lined">
                        <h2 class="title">Sản phẩm mới của cửa hàng</h2>
                    </div>
                </div>
            </div>
            <!-- /title -->

            <div class="row popup-products blocks-spacer">

                <asp:Repeater ID="ReNewProduct" runat="server">
                    <ItemTemplate>
                        <!--  ==========  -->
                <!--  = Product =  -->
                <!--  ==========  -->
                <div class="span3">
                    <div class="product">
                        <div class="product-img">
                            <div class="picture">
                                <img src="/Content/ProductImg/<%#Eval("Avatar") %>" alt="" width="540" height="374" />
                                <div class="img-overlay">
                                    <asp:LinkButton CssClass="btn buy btn-danger" ID="btnAddCart" CommandName="AddCart" CommandArgument='<%#Eval("ProductId") %>' runat="server">Thêm giỏ hàng</asp:LinkButton>
                                    <a href="Detail.aspx?ProductID=<%#Eval("ProductId") %>"  class="btn more btn-primary">Xem thêm</a>
                                </div>
                            </div>
                        </div>
                        <div class="main-titles no-margin">
                            <h4 class="title"><%#Eval("Price","{0:0,0}") %>đ</h4>
                            <h5 class="no-margin"><%#Eval("Name") %></h5>
                        </div>
                    </div>
                </div>
                <!-- /product -->
                    </ItemTemplate>
                </asp:Repeater>
                




                
               


            </div>
        </div>
    </div>
    <!-- /new products -->

    <!--  ==========  -->
    <!--  = Most Popular products =  -->
    <!--  ==========  -->
    <div class="most-popular blocks-spacer">
        <div class="container">

            <!--  ==========  -->
            <!--  = Title =  -->
            <!--  ==========  -->
            <div class="row">
                <div class="span12">
                    <div class="main-titles lined">
                        <h2 class="title"><span class="light">Most</span> Popular Products</h2>
                    </div>
                </div>
            </div>
            <!-- /title -->

            <div class="row popup-products">



                <!--  ==========  -->
                <!--  = Product =  -->
                <!--  ==========  -->
                <div class="span3">
                    <div class="product">
                        <div class="product-img">
                            <div class="picture">
                                <img src="/Content/images/dummy/most-popular-products/popular-1.jpg" alt="" width="540" height="412" />
                                <div class="img-overlay">
                                    <a href="#" class="btn more btn-primary">More</a>
                                    <a href="#" class="btn buy btn-danger">Add to Cart</a>
                                </div>
                            </div>
                        </div>
                        <div class="main-titles no-margin">
                            <h4 class="title">$32</h4>
                            <h5 class="no-margin">Horsefeathers 456</h5>
                        </div>
                        <p class="desc">59% Cotton Lorem Ipsum Dolor Sit Amet esed ultrices sapien nunc nam frignila</p>
                        <p class="center-align stars">
                            <span class="icon-star stars-clr"></span>
                            <span class="icon-star stars-clr"></span>
                            <span class="icon-star"></span>
                            <span class="icon-star"></span>
                            <span class="icon-star"></span>

                        </p>
                    </div>
                </div>
                <!-- /product -->



                <!--  ==========  -->
                <!--  = Product =  -->
                <!--  ==========  -->
                <div class="span3">
                    <div class="product">
                        <div class="product-img">
                            <div class="picture">
                                <img src="/Content/images/dummy/most-popular-products/popular-2.jpg" alt="" width="540" height="412" />
                                <div class="img-overlay">
                                    <a href="#" class="btn more btn-primary">More</a>
                                    <a href="#" class="btn buy btn-danger">Add to Cart</a>
                                </div>
                            </div>
                        </div>
                        <div class="main-titles no-margin">
                            <h4 class="title">$32</h4>
                            <h5 class="no-margin">Horsefeathers 280</h5>
                        </div>
                        <p class="desc">59% Cotton Lorem Ipsum Dolor Sit Amet esed ultrices sapien nunc nam frignila</p>
                        <p class="center-align stars">
                            <span class="icon-star stars-clr"></span>
                            <span class="icon-star stars-clr"></span>
                            <span class="icon-star stars-clr"></span>
                            <span class="icon-star"></span>
                            <span class="icon-star"></span>

                        </p>
                    </div>
                </div>
                <!-- /product -->



                <!--  ==========  -->
                <!--  = Product =  -->
                <!--  ==========  -->
                <div class="span3">
                    <div class="product">
                        <div class="product-img">
                            <div class="picture">
                                <img src="/Content/images/dummy/most-popular-products/popular-3.jpg" alt="" width="540" height="412" />
                                <div class="img-overlay">
                                    <a href="#" class="btn more btn-primary">More</a>
                                    <a href="#" class="btn buy btn-danger">Add to Cart</a>
                                </div>
                            </div>
                        </div>
                        <div class="main-titles no-margin">
                            <h4 class="title">$32</h4>
                            <h5 class="no-margin">Horsefeathers 158</h5>
                        </div>
                        <p class="desc">59% Cotton Lorem Ipsum Dolor Sit Amet esed ultrices sapien nunc nam frignila</p>
                        <p class="center-align stars">
                            <span class="icon-star stars-clr"></span>
                            <span class="icon-star"></span>
                            <span class="icon-star"></span>
                            <span class="icon-star"></span>
                            <span class="icon-star"></span>

                        </p>
                    </div>
                </div>
                <!-- /product -->



                <!--  ==========  -->
                <!--  = Product =  -->
                <!--  ==========  -->
                <div class="span3">
                    <div class="product">
                        <div class="product-img">
                            <div class="picture">
                                <img src="/Content/images/dummy/most-popular-products/popular-4.jpg" alt="" width="540" height="412" />
                                <div class="img-overlay">
                                    <a href="#" class="btn more btn-primary">More</a>
                                    <a href="#" class="btn buy btn-danger">Add to Cart</a>
                                </div>
                            </div>
                        </div>
                        <div class="main-titles no-margin">
                            <h4 class="title">$32</h4>
                            <h5 class="no-margin">Horsefeathers 275</h5>
                        </div>
                        <p class="desc">59% Cotton Lorem Ipsum Dolor Sit Amet esed ultrices sapien nunc nam frignila</p>
                        <p class="center-align stars">
                            <span class="icon-star stars-clr"></span>
                            <span class="icon-star"></span>
                            <span class="icon-star"></span>
                            <span class="icon-star"></span>
                            <span class="icon-star"></span>

                        </p>
                    </div>
                </div>
                <!-- /product -->
            </div>
        </div>
    </div>
    <!-- /most popular -->

    <!--  ==========  -->
    <!--  = Lastest News =  -->
    <!--  ==========  -->
    <div class="darker-stripe blocks-spacer more-space latest-news with-shadows">
        <div class="container">

            <!--  ==========  -->
            <!--  = Title =  -->
            <!--  ==========  -->
            <div class="row">
                <div class="span12">
                    <div class="main-titles center-align">
                        <h2 class="title">
                            <span class="clickable icon-chevron-left" id="tweetsLeft"></span>&nbsp;&nbsp;&nbsp;
    			            <span class="light">Latest</span> News &nbsp;&nbsp;&nbsp;
    			            <span class="clickable icon-chevron-right" id="tweetsRight"></span>
                        </h2>
                    </div>
                </div>
            </div>
            <!-- /title -->

            <!--  ==========  -->
            <!--  = News content =  -->
            <!--  ==========  -->
            <div class="row">
                <div class="span12">
                    <div class="carouFredSel" data-nav="tweets" data-autoplay="false">


                        <!--  ==========  -->
                        <!--  = Slide =  -->
                        <!--  ==========  -->
                        <div class="slide">
                            <div class="row">
                                <div class="span6">
                                    <div class="news-item">
                                        <div class="published">12. July, 2013</div>
                                        <h6><a href="#">Title of the Latest News</a></h6>
                                        <p>There's a voice that keeps on calling me. Down the road, that's where I'll al ways be. Every stop I make, I make a new friend. Lorem sown the road, that's where I'll always be. Every stop I make, I make a new friend.</p>
                                    </div>
                                </div>
                                <div class="span6">
                                    <div class="news-item">
                                        <div class="published">18. July, 2013</div>
                                        <h6><a href="#">Another Amusing News</a></h6>
                                        <p>There's a voice that keeps on calling me. Down the road, that's where I'll al ways be. Every stop I make, I make a new friend. Lorem sown the road, that's where I'll always be. Every stop I make, I make a new friend.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- /slide -->


                        <!--  ==========  -->
                        <!--  = Slide =  -->
                        <!--  ==========  -->
                        <div class="slide">
                            <div class="row">
                                <div class="span6">
                                    <div class="news-item">
                                        <div class="published">12. July, 2013</div>
                                        <h6><a href="#">Title of the Latest News</a></h6>
                                        <p>There's a voice that keeps on calling me. Down the road, that's where I'll al ways be. Every stop I make, I make a new friend. Lorem sown the road, that's where I'll always be. Every stop I make, I make a new friend.</p>
                                    </div>
                                </div>
                                <div class="span6">
                                    <div class="news-item">
                                        <div class="published">18. July, 2013</div>
                                        <h6><a href="#">Another Amusing News</a></h6>
                                        <p>There's a voice that keeps on calling me. Down the road, that's where I'll al ways be. Every stop I make, I make a new friend. Lorem sown the road, that's where I'll always be. Every stop I make, I make a new friend.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- /slide -->

                    </div>
                </div>
            </div>
            <!-- /news content -->
        </div>
    </div>
    <!-- /latest news -->
</asp:Content>
